<template>
  <div class="msg-center">
    <h3>消息中心</h3>
    <!-- 全部已读 -->
    <el-row>
      <el-col :span="21"></el-col>
      <el-col :span="3" class="flex-col">
        <span class="read-all" @click="handleReadAll">全部标为已读</span>
      </el-col>
    </el-row>

    <div class="msg-center-list">
      <!-- 消息列表 -->
      <comTable
        class="msg-table"
        :showHeader="false"
        :loading="pagination.loading"
        :tableData="msgList"
        :listCount="pagination.total"
        :pageSize="pagination.pageSize"
        :currentPage="pagination.currentPage"
        :userColumn="tableColumns()"
        @updatePage="handleCurrentChange"
        @sizePage="handleSizeChange"
      >
        <template #is_read>
          <el-table-column label="状态" width="50">
            <template #default="scope">
              <span class="status-unread" v-if="!scope.row.is_read"></span>
            </template>
          </el-table-column>
        </template>
        <template #created_at>
          <el-table-column label="时间" width="250">
            <template #default="scope">
              <div class="flex-row msg-time-box">
                <span class="msg-time">{{ scope.row.created_at }}</span>
                <span class="msg-spliter"></span>
              </div>
            </template>
          </el-table-column>
        </template>
        <template #content>
          <el-table-column label="消息">
            <template #default="scope">
              <span
                class="msg-info"
                @click="lookMsgDetail(scope.row)"
                :class="['msg-info--' + (scope.row.is_read ? 'read' : ' unread')]"
                >{{ scope.row.title }}</span
              >
            </template>
          </el-table-column>
        </template>
        <template #operate>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <div :span="3" class="flex-row msg-operation">
                <span
                  class="msg-mark-read"
                  :class="['msg-mark-read--' + (scope.row.is_read ? 'read' : ' unread')]"
                  :disabled="scope.row.is_read"
                  @click="handleReadItem(scope.row)"
                  >标为已读</span
                >
                <span class="msg-mark-delete" @click="handleDeleteItem(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </template>
      </comTable>
    </div>
    <div
      class="msg-dialog"
      v-if="msgDialogVisible"
      ref="drawRef"
      :class="dialogClassName"
      @mouseenter="newDra"
      @click="selectDialog"
    >
      <div class="msg-dialog-title">
        <p>消息详情</p>
        <el-icon style="cursor: pointer" @click="closeMsgDialog"><Close /></el-icon>
      </div>
      <div class="msg-dialog-content">
        <p class="msg-dialog-content-title">{{ msgDetailText.created_at }}</p>
        <p class="msg-dialog-content-text">
          {{ msgDetailText.content }}
        </p>
        <p class="look-detali" @click="goApplyDetail">点击查看</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ElMessage} from 'element-plus';
import {reactive, ref, onMounted, nextTick, watch} from 'vue';
import router from '@/router';
import store from '@/store';
import personalApi from '@/api/personalApi';
import comTable from '@/components/comTable/index.vue';
import UseDraggable from '@/utils/useDraggableElem';

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0,
  loading: false,
});
const msgDialogVisible = ref(false);
const msgDetailText = ref('');

const msgList = ref([]);
const tableColumns = () => [
  {
    slot: 'is_read',
    label: '状态',
    minWidth: 50,
  },
  {
    slot: 'content',
    label: '消息',
  },
  {
    slot: 'created_at',
    label: '时间',
  },
  {
    slot: 'operate',
    label: '操作',
  },
];
const getMsgList = (params: object) => {
  pagination.loading = true;
  personalApi
    .newsList(params)
    .then((res) => {
      if (res.status === 0) {
        msgList.value = res.data.data;
        pagination.total = res.data.total;
        pagination.currentPage = res.data.current_page;
        pagination.pageSize = Number(res.data.per_page);
        pagination.loading = false;
      }
    })
    .catch((err) => {
      throw err;
    });
};

onMounted(getMsgList);
// 分页
const handleSizeChange = (e: any) => {
  pagination.pageSiz = e.pageSize;
  getMsgList({per_page: pagination.pageSiz});
};
const handleCurrentChange = (e: any) => {
  pagination.currentPage = e.currentPage;
  getMsgList({page: pagination.currentPage, per_page: pagination.pageSiz});
};
// 获取未读消息数量
const getMsgUnread = () => {
  personalApi
    .newsUnread()
    .then((res) => {
      if (res.status === 0) {
        store.commit('setMessageCount', res.data);
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 全部已读
const handleReadAll = () => {
  personalApi
    .markRead({type: 'all'})
    .then((res) => {
      if (res.status === 0) {
        ElMessage({
          message: '操作成功!',
          type: 'success',
        });
        getMsgList();
        getMsgUnread();
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 操作删除
const handleDeleteItem = (msg: any) => {
  personalApi
    .deleteRead({id: msg.id})
    .then((res) => {
      if (res.status === 0) {
        ElMessage({
          message: '操作成功!',
          type: 'success',
        });
        getMsgList();
        getMsgUnread();
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 操作已读
const handleReadItem = (msg: any) => {
  personalApi
    .markRead({id: msg.id, type: 'single'})
    .then((res) => {
      if (res.status === 0) {
        ElMessage({
          message: '操作成功!',
          type: 'success',
        });
        getMsgList();
        getMsgUnread();
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 查看消息详情
const lookMsgDetail = (item) => {
  msgDialogVisible.value = !msgDialogVisible.value;
  msgDetailText.value = item;
};
/**
 * 跳转到审批列表
 */
const goApplyDetail = () => {
  router.push({name: 'applyManage'});
  msgDialogVisible.value = !msgDialogVisible.value;
};
// 消息详情弹窗关闭
const closeMsgDialog = () => {
  msgDialogVisible.value = !msgDialogVisible.value;
};
// 拖拽相关
const dialogClassName = ref('dialogClassName');
let draggable;

const setUseDraggable = () => {
  dialogClassName.value += store.state.dialogClassNameCount;
  store.commit('changeDialogClassNameCount', 1);
  const params = {
    fatherSelector: dialogClassName.value,
  };
  nextTick(() => {
    draggable = new UseDraggable(params);
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
  });
};
const newDra = () => {
  const params = {
    fatherSelector: dialogClassName.value,
  };
  // eslint-disable-next-line no-new
  new UseDraggable(params);
};

const selectDialog = () => {
  try {
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
    store.commit('changeDialogzIndex', 1);
  } catch {}
};

watch(
  () => msgDialogVisible.value,
  (newVal) => {
    if (newVal && draggable !== '') {
      // 元素拖拽
      draggable = setUseDraggable();
    }
  },
);
</script>

<style lang="scss" scoped>
@import url('@/assets/css/manage.scss');

.msg-center {
  position: relative;
  height: calc(100% - 120px);
  width: calc(100% - 60px);
  box-sizing: border-box;
  margin: 30px;
  background-color: #fff;
  padding: 20px 30px;
  .read-all {
    color: #1182fb;
    cursor: pointer;
    margin-bottom: 20px;
    align-self: center;
    position: relative;
    bottom: 10px;
    &:hover {
      opacity: 0.6;
    }
  }

  &-paging {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }

  &-list {
    height: 95%;
  }
}
.msg-table {
  height: 100%;
  width: 100%;
  align-items: center;

  &-first {
    border-top: 1px solid #dde2ef;
  }
  .status-indicator {
    height: 48px;
    position: relative;
  }
  .status-unread {
    width: 8px;
    height: 8px;
    background: #ff5c5e;
    border-radius: 8px;
    /* 垂直居中 */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .msg-info {
    color: #333333;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    &--read {
      color: #999999;
    }
    &:hover {
      color: #1890ff;
      text-decoration: underline;
    }
  }
  .msg-time-box {
    justify-content: space-around;
  }
  .msg-time {
    color: #838a9d;
    font-size: 12px;
    line-height: 1.8em;
    min-width: 150px;
    margin: 0 50px;
  }
  .msg-spliter {
    display: inline-block;
    width: 2px;
    height: 30px;
    background: #dde2ef;
  }
  .msg-mark {
    &-read {
      color: rgb(17, 130, 251);
      margin-right: 20px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
      &--read {
        color: #999999;
        cursor: not-allowed;
      }
    }
    &-delete {
      color: #ff5c5e;
      cursor: pointer;

      &:hover {
        opacity: 0.6;
      }
    }
  }
  .msg-operation {
    justify-content: center;
  }
}
.msg-dialog {
  position: fixed;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 486px;
  min-height: 235px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
    0px 6px 16px -8px rgba(0, 0, 0, 0.08);
  &-title {
    display: flex;
    margin: 10px 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    box-sizing: border-box;
  }
  &-line {
    width: 100%;
    height: 1px;
    background: #999999;
  }
  &-content {
    padding: 10px 33px;
  }
}
.look-detali {
  text-align: center;
  color: #1182fb;
  text-decoration: underline;
  cursor: pointer;
}
</style>
